<template>
  <!-- 独立机构成员管理弹框 -->
  <a-modal
    :title="modalMembersTitle"
    width="800px"
    centered
    :visible="membersVisible"
    :maskClosable="false"
    okText="确定"
    @ok="submitInform('form')"
    @cancel="closeDraw"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      v-bind="formLayout"
      class="inform-form"
      style="height:auto;"
    >
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="用户名" prop="loginName">
            <a-input v-model="form.loginName" :disabled="true" :maxLength="16" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="手机号" prop="mobile">
            <a-input v-model="form.mobile" autocomplete="off" :maxLength="11"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="单位信息" prop="unitName">
            <a-input v-model="form.unitName" autocomplete="off" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="邮箱" prop="email">
            <a-input v-model="form.email" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="角色类型" prop="isAdmin">
            <a-radio-group v-model="form.isAdmin">
              <a-radio :value="1">一般用户</a-radio>
              <a-radio :value="0">管理员</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="是否启用" prop="flag">
            <a-switch v-model="form.flag" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="是否短信" prop="sendSms">
            <a-switch v-model="form.sendSms" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="申请时间" prop="applyTime">
            <a-input v-model="form.applyTime" :disabled="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { members } from "@/api/user";
import { booleanConversion, numberConversion } from "assets/js/utils.js";
export default {
  props: {
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    },
    membersVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      modalMembersTitle: "成员管理",
      form: {
        id: "",
        loginName: "",
        applyTime: "",
        mobile: "",
        flag: true,
        isAdmin: 0,
        sendSms: true,
        unitName: "",
        email: ""
      },
      formLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      rules: {
        loginName: [
           {
            validator: (rule, value, callback) => {
              const regg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
              //const replaceReg = /[^\\x00-\\xff]/;
              //var len = value.replace(/[^\x00-\xff]/g, "aa").length;
              if (value && !regg.test(value)) {
                callback(new Error("请输入汉字/英文/数字, 不包含特殊符号"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
          
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        mobile: [{
            max: 11,
            message: "长度不合法, 手机号限11位",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              const number = /^[0-9]+$/;
              if (value && !number.test(value)) {
                callback(new Error("只允许输入数字"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"],
          },
          {
            pattern: /^1(3|4|5|6|7|8)\d{9}$/,
            message: "请输入正确的手机号",
          },
          { required: true, message: "请输入手机号", trigger: "blur" }],
        flag: [
          { required: true, message: "请选择角色类型", trigger: "change" }
        ],
        sendSms: [
          { required: true, message: "请选择是否启用短信", trigger: "change" }
        ],
        isAdmin: [{ required: true, message: "请选择角色类型", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.form.id = this.id;
    //this.getMemberMessage()
  },
  methods: {
    getMemberMessage() {
      members
        .getMemberMessage(this.id)
        .then(res => {
          this.form.applyTime = res.data.data.applyTime;
          this.form.email = res.data.data.email;
          this.form.flag = booleanConversion(res.data.data.flag);
          this.form.id = res.data.data.id;
          this.form.isAdmin = res.data.data.isAdmin;
          this.form.loginName = res.data.data.loginName;
          this.form.mobile = res.data.data.mobile;
          this.form.sendSms = booleanConversion(res.data.data.sendSms);
          this.form.unitName = res.data.data.unitName;
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
    submitInform(formName) {
      //提交弹框表单
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        }
        var params = Object.assign({}, this.form);
        params.flag = numberConversion(this.form.flag);
        params.sendSms = numberConversion(this.form.sendSms);
        this.updateSubmit(params)
      });
    },
    updateSubmit(params) {
      members
        .updateMember(params)
        .then(res => {
          this.$message.destroy();
          this.$message.success(res.data.msg);
          this.$emit("updateInform");
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    //关闭弹框
    closeDraw() {
      this.$emit("closeFunc");
    }
  },
  watch: {
    membersVisible(n) {
      if (n) {
        this.getMemberMessage();
      }else{
        this.$refs['form'].resetFields();
      }
    }
  }
};
</script>

<style lang="stylus" scoped></style>